<script setup></script>
<template>
    <div class="container">
        <div class="cont-box">
            <div class="item item-1"><img src="../img/status/404.png" /></div>
            <div class="item item-2"><img src="../img/status/500.png" /></div>
            <div class="item item-3"><img src="../img/status/503.png" /></div>
            <div class="item item-4"><img src="../img/status/404.png" /></div>
            <div class="item item-5"><img src="../img/status/500.png" /></div>
        </div>
    </div>
</template>
<style scoped lang="scss">
.container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.cont-box {
    width: 300px;
    height: 300px;
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    grid-template-areas:
        'a a b'
        'd e b'
        'd c c';
    .item-1 {
        grid-area: a;
    }
    .item-2 {
        grid-area: b;
    }
    .item-3 {
        grid-area: c;
    }
    .item-4 {
        grid-area: d;
    }
    .item-5 {
        grid-area: e;
    }
    > div {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        > img {
            width: 280%;
            height: 280%;
            object-fit: cover;
        }
    }
}
.cont-box {
    --degVar: 360deg;
}
.item img {
    --degVar: -360deg;
}
.cont-box,
.item img {
    animation: transBox 10s infinite linear;
}
@keyframes transBox {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(var(--degVar));
    }
}
</style>
